import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class index extends Component {
    // 对接受的props进行类型和必要性限制
    static propTypes = {
      updateTodoList: PropTypes.func.isRequired,
      deleteTodoList: PropTypes.func.isRequired,
      done: PropTypes.bool.isRequired,
      todo: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired
    }
    state = {
        show: false
    }
    handleMouse = (flag) =>{
        return ()=>{
            this.setState({
                show: flag
            })
        }
    }
    handleDelete = () =>{
      this.props.deleteTodoList(this.props.id)
    }
  render() {
    let {todo, done, id} = this.props
    let {show} = this.state
    const changeCheck = (e) => {
        this.props.updateTodoList(id, e.target.checked)
    }
    return (
        <li style={{backgroundColor: show ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <label>
            <input type="checkbox" checked={done} onChange={changeCheck}/>
            <span>{todo}</span>
          </label>
          <button className="btn btn-danger" style={{display: show ? 'inline-block' : 'none'}} onClick={this.handleDelete}>删除</button>
        </li>
    )
  }
}
